<script setup>
import { ref, watch } from "vue"
import { useRouter } from "vue-router"

const router = useRouter()

const props = defineProps({
    isDialog:Boolean,
})
const emit = defineEmits(['again'])

const isShow = ref(props.isDialog)
watch(()=>props.isDialog,()=>{
    isShow.value=props.isDialog
})

const again = () =>{
    emit('again')
}

</script>

<template>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" style="padding: 0;borderRadius: 16px;"
        v-model="isShow" width="468" :show-close="false">
        <div class="endbox">
            <img draggable="false" src="@/assets/right.svg" alt="">
            <div class="tips">挑战成功</div>
            <div class="operator">
                <div @click="router.go(-1)">退出</div>
                <div @click="again">再来一次</div>
            </div>
        </div>
    </el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog{
    border-radius: 16px;
    .endbox{
        margin-top: -16px;
        background: linear-gradient(180deg, #E4ECFC 2%, #FFFFFF 57%);
        user-select: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 16px;
        img{
            margin-top: 70px; 
            height: 54px;
            width: 54px;
        }
        .tips{
            margin-top: 14px;
            font-size: 32px;
            line-height: 38px;
            color: #132241;
        }
        .operator{
            width: 100%;
            margin: 76px 0;
            display: flex;
            justify-content: center;
            div{
                cursor: pointer;
                margin: 0 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 136px;
                height: 44px;
                font-size: 20px;
                line-height: 23.4px;
                color: #3776F9;
                background: rgba(55, 118, 249, 0.2);
            }
            div:last-child{
                background: #3776F9;
                color: #FFFFFF;
            }
        }
    }
    
}
</style>